<template>
  <FormItem :block="block" v-bind="formItemProps" :rules="computeRules" :disabled="inputDisabled">
    <template #default>
      <ElInput
        :value="value"
        type="textarea"
        :rows="rows"
        :resize="resize ? null : 'none'"
        :show-word-limit="showWordLimit"
        :disabled="inputDisabled"
        v-bind="inputProps"
        :maxlength="maxLength"
        :placeholder="computePlaceholder"
        v-on="listeners"
        @input="val => $emit('input', val)" />
    </template>
    <template #error="{ error }">
      <slot name="error" :error="error"></slot>
    </template>
    <template #label>
      <slot name="label"></slot>
    </template>
  </FormItem>
</template>

<script>
  import formInput from './form-input'
  import { filterProperties, normalizeProps } from '@/util'
  import { Input } from 'element-ui'

  const autoBindKeys = Object.keys(Input.props).filter(
    key => !['value', 'placeholder', 'type', 'rows', 'resize', 'showWordLimit', 'maxLength', 'maxlength'].includes(key)
  )

  export default {
    name: 'FormTextarea',
    mixins: [formInput],
    props: {
      value: [String, Number],
      rows: {
        type: String,
        default: '4'
      },
      resize: Boolean,
      showWordLimit: {
        type: Boolean,
        default: true
      },
      maxLength: {
        type: String,
        default: '800'
      },
      block: {
        type: Boolean,
        default: true
      }
    },
    computed: {
      inputProps() {
        return filterProperties({ ...normalizeProps(this.$attrs), ...this.$props }, autoBindKeys)
      }
    }
  }
</script>
